<template>
    <div class="row">
        <div class="col-sm-12">
            <left-title :title="top.title" :desc="top.desc"></left-title>
            <div class="row">
                <div class="col-sm-8">
                    <div class="left-box">
                        <div class="news-view">
                            <div class="news-info">
                                <p>{{ self_introduction }}</p>
                            </div>
                        </div>
                        <div class="about-blog">
                            <h2> 我和我的博客 </h2>
                            <ul>
                                <li v-for="item in blog" :key="item.id">
                                    <router-link :to="'/article/' + item.id">
                                        {{ item.title }}
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-box col-sm-4">
                    <div class="about-me">
                        <h2 class="home-title">
                            {{ about.title }}
                        </h2>
                        <div class="avatar">
                            <img :src="avatar" class="img-circle">
                        </div>
                        <div class="about-icon">
                            <p v-for="(item, key) in about.items" :key="key">
                                {{ item }}
                            </p>
                        </div>
                    </div>
                    <we-chat></we-chat>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import WeChat from './common/WeChat';
    import LeftTitle from './common/LeftTitle';
    import {mapState,mapActions} from 'vuex'

    export default {
        components: {
            WeChat,
            LeftTitle
        },
        name: "About",
        created() {
            // 站长推荐
            if (this.$store.state.blog.length <= 0) {
                this.getBlog();
            }

            // 关于我
            this.getAbout();
        },
        methods: {
            ...mapActions(["getBlog"]),
            ...mapActions("about", ["getAbout"])
        },
        computed: {
            ...mapState(['blog']),
            ...mapState("about", [
                "top",
                "about",
                "avatar",
                "self_introduction"
            ])
        }
    }
</script>

<style lang="scss" scoped>
    .news-view {
        padding: 20px 5px;
        .news-info {
            line-height: 24px;
            text-align: justify;
        }
    }

    .about-icon {
        line-height: 30px;
        padding: 10px;
        p {
            background: #f6f6f6;
            margin: 5px 0;
            padding-left: 10px;
            border-radius: 5px;
            text-shadow: rgba(255, 255, 255, 0.3) 0 1px 0;
        }
    }

    .avatar {
        box-sizing: content-box;
        text-align: center;
        margin: 10px auto;
    }

    .about-blog {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
        ul {
            padding-left: 0;
            li {
                background: #f1f1f1;
                line-height: 30px;
                margin: 5px 0;
                border-radius: 10px;
                border-top: 2px solid #e2e2e2;
                padding-left: 10px;
                text-shadow: #eae7e7 0 0 1px;
                a:hover {
                    color: #000
                }
            }
        }

    }
</style>